<template>
  <div class="space-y-4">
    <slot name="template">
      <MuiSkeletonItem v-for="(width, index) in itemWidths"
                          :key="index"
                          :width="width"
                          :size="size"
                          :animation="animation"/>
    </slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import MuiSkeletonItem from './MuiSkeletonItem.vue'
import { SkeletonProps } from './types'

const props = withDefaults(defineProps<SkeletonProps>(), {
  cols: 1,
  rows: 4,
  animation: false,
  size: 'mini'
})

const addPxIfNumber = (value: number | string): string => {
  return typeof value === 'number' || /^\d+$/.test(value.toString()) ? `${ value }px` : value.toString()
}

const itemWidths = computed(() => {
  if (props.paragraph) {
    const { rows, width } = props.paragraph
    return Array.from({ length: rows })
                .map((_, index) => addPxIfNumber(width[index] || width[width.length - 1]))
  }
  else {
    return Array.from({ length: Number(props.rows) })
                .map(() => (props.cols === 1 ? '100%' : `${ 100 / Number(props.cols) }%`))
  }
})
</script>